<template>
  <div class="logo">
    <div class="logo_title">
      <img src="@/assets/image/logo.png" alt="logo" class="img" />
      <span class="name">itally</span>
    </div>
    <div class="logo_des">
      <span>记</span>
      <span>录</span>
      <span>重</span>
      <span>要</span>
      <span>的</span>
      <span>小</span>
      <span>事</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.logo {
  width: 100%;
  height: 38%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo_title {
  display: flex;
  justify-content: center;
  align-items: center;

  .img {
    width: 3rem;
    height: 3rem;
  }
  .name {
    background-image: linear-gradient(
      to right,
      rgb(83, 13, 116),
      rgb(190, 52, 218)
    );
    background-clip: text;
    color: transparent;
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 0.08rem;
  }
}
.logo_des {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: row;
  span {
    font-size: 0.9rem;
    margin: 0.19rem;
    animation: bounce 4.8s infinite both;
  }
}

.logo_des span:nth-child(1) {
  animation-delay: 3.2s;
}
.logo_des span:nth-child(2) {
  animation-delay: 3.4s;
}
.logo_des span:nth-child(3) {
  animation-delay: 3.6s;
}
.logo_des span:nth-child(4) {
  animation-delay: 3.8s;
}
.logo_des span:nth-child(5) {
  animation-delay: 4s;
}

.logo_des span:nth-child(6) {
  animation-delay: 4.2s;
}

.logo_des span:nth-child(7) {
  animation-delay: 4.4s;
}

@keyframes bounce {
  // 0% {
  //   transform: translateY(0px);
  // }
  80% {
    transform: translateY(0rem);
  }
  90% {
    transform: translateY(-0.7rem);
  }
  100% {
    transform: translateY(0px);
  }
}
</style>
